<div id="modals">
  <div class="modal modal-account-new-devices" data-uie-name="modal-account-new-devices">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-close icon-close icon-button pull-right"></div>
        <div class="modal-title" data-bind="l10n_text: z.string.modalAccountNewDevicesHeadline" data-uie-name="status-modal-title"></div>
      </div>
      <div class="modal-text" data-uie-name="status-modal-text">
        <div class="modal-new-devices-list"></div>
        <div data-bind="l10n_text: z.string.modalAccountNewDevicesMessage"></div>
      </div>
      <div class="modal-footer">
        <div class="modal-secondary button button-medium button-full button-inverted" data-bind="l10n_text: z.string.modalAccountNewDevicesSecondary" data-uie-name="go-manage-devices"></div>
        <div class="modal-close button button-medium button-full" data-bind="l10n_text: z.string.modalAcknowledgeAction" data-uie-name="do-ok"></div>
      </div>
    </div>
  </div>

  <div class="modal modal-session-reset" data-uie-name="modal-session-reset">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-close icon-close icon-button pull-right"></div>
        <div class="modal-title" data-bind="l10n_text: z.string.modalSessionResetHeadline" data-uie-name="status-modal-title"></div>
      </div>
      <div class="modal-text" data-uie-name="status-modal-text">
        <span data-bind="l10n_text: z.string.modalSessionResetMessage1"></span>
        <a data-bind="l10n_href: {support: z.config.SUPPORT.FORM.BUG}, l10n_text: z.string.modalSessionResetMessageLink" rel="nofollow noopener noreferrer" target="_blank"></a>
        <span data-bind="l10n_text: z.string.modalSessionResetMessage2"></span>
      </div>
      <div class="modal-close button button-medium button-fluid" data-bind="l10n_text: z.string.modalAcknowledgeAction" data-uie-name="do-close"></div>
    </div>
  </div>

  <div class="modal modal-template-acknowledge" data-uie-name="modal-template-acknowledge">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-close icon-close icon-button pull-right" data-uie-name="do-close"></div>
        <div class="modal-title" data-uie-name="status-modal-title"></div>
      </div>
      <div class="modal-text" data-uie-name="status-modal-text"></div>
      <div class="modal-footer">
        <div class="modal-action button button-medium button-fluid button-theme-red" data-uie-name="do-action"></div>
      </div>
    </div>
  </div>

  <div class="modal modal-template-confirm" data-uie-name="modal-template-confirm">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-close icon-close icon-button pull-right" data-uie-name="do-close"></div>
        <div class="modal-title" data-uie-name="status-modal-title"></div>
      </div>
      <div class="modal-text" data-uie-name="status-modal-text"></div>
      <div class="modal-footer">
        <div class="modal-secondary button button-medium button-full button-inverted" data-uie-name="do-secondary"></div>
        <div class="modal-action button button-medium button-full" data-uie-name="do-action"></div>
      </div>
    </div>
  </div>

  <div class="modal modal-template-input" data-uie-name="modal-template-input">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-close icon-close icon-button pull-right" data-uie-name="do-close"></div>
        <div class="modal-title" data-uie-name="status-modal-title"></div>
      </div>
      <div class="modal-text" data-uie-name="status-modal-text"></div>
      <input class="modal-input" type="password"/>
      <div class="modal-footer">
        <div class="modal-action button button-medium button-full" data-uie-name="do-action"></div>
      </div>
    </div>
  </div>

  <div class="modal modal-template-option" data-uie-name="modal-template-option">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-close icon-close icon-button pull-right" data-uie-name="do-close"></div>
        <div class="modal-title" data-uie-name="status-modal-title"></div>
      </div>
      <div class="modal-text" data-uie-name="status-modal-text"></div>
      <div class="modal-option">
        <div class="checkbox text-theme">
          <input class="modal-checkbox" type="checkbox" id="clear-data-checkbox" data-uie-name="do-clear-data">
          <label class="label-xs" for="clear-data-checkbox">
            <span class="modal-option-text text-graphite-dark"></span>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <div class="modal-secondary button button-medium button-full button-inverted" data-uie-name="do-secondary"></div>
        <div class="modal-action button button-medium button-full" data-uie-name="do-action"></div>
      </div>
    </div>
  </div>
</div>
